<template>
  <div class="app-container">
    <!--  查询表单  -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="订单编号：" prop="orderId">
        <el-input v-model="queryParams.orderId" placeholder="请输入订单编号" clearable/>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="dateTime"
          type="datetimerange"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!--  订单列表  -->
    <el-tabs v-model="tabsValue" type="border-card" @tab-click="tabsClick">
      <el-tab-pane v-for="(item,index) in dict.type.supplement_order_type" :key="index" :label="item.label"
                   :name="item.value">
        <el-table v-loading="loading" ref="multipleTable" :data="sellerOrderList" default-expand-all row-key="id"
                  :tree-props="{children: 'sellerChildOrderList'}" border>
          <el-table-column label="订单信息" prop="orderId">
            <template slot-scope="scope">
              <div v-if="scope.row.childOrderId" class="ml40">
                <div>
                  <span>商品编码：</span>
                  <span>{{ scope.row.skuCode }}</span>
                </div>
                <div class="img-box">
                  <span>商品主图：</span>
                  <!--                  <imagePreview :src="scope.row.snapshotSmallPhotoPath" width="50px" height="50px"/>-->
                </div>
              </div>
              <span v-else>
                订单号：<span class="text-danger">{{ scope.row.orderId }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="凭证" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.childOrderId">
                <div class="img-box">
                  <span>采购凭证：</span>
                  <imagePreview :src="scope.row.proof" width="100px" height="80px"/>
                </div>
              </div>
              <div v-else>
                <div class="img-box">
                  <span>物流凭证：</span>
                  <imagePreview :src="scope.row.logisticsProof" width="100px" height="80px"/>
                </div>
                <div class="img-box mt10" v-if="tabsValue== '2'">
                  <span>纠纷凭证：</span>
                  <imagePreview :src="scope.row.disputeImg" width="100px" height="80px"/>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="金额" prop="bizType">
            <template slot-scope="scope">
              <div v-if="scope.row.childOrderId">
                <div>采购金额： {{ scope.row.purchase }}</div>
              </div>
              <div v-else>
                <div>物流金额： {{ scope.row.realityLogisticsPrice }}</div>
                <div v-if="tabsValue== '2'">退款金额： {{ scope.row.disputeAmount }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.childOrderId">
                <el-button size="mini" type="text" @click="openPurchaseVoucherModal(scope.row)">上传购买凭证</el-button>
              </div>
              <div v-else>
                <el-button size="mini" type="text" @click="openLogisticsVoucherModal(scope.row)">上传物流信息
                </el-button>
                <el-button v-if="tabsValue== '2'" size="mini" type="text" @click="openDisputeVoucherModal(scope.row)">
                  上传纠纷凭证
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
    <!--  上传采购凭证  -->
    <purchaseVoucher v-if="isOpenPurchaseVocherModal" :orderId="orderId" :childOrderId="childOrderId"
                     :voucherInfo="purchaseVoucherInfo"
                     @closePurchaseVoucherModal="closePurchaseVoucheModal"></purchaseVoucher>
    <!--  上传物流凭证  -->
    <logisticsVoucher v-if="isOpenLogisticsVoucherModal" :orderId="orderId" :voucherInfo="logisticsVoucherInfo"
                      @closeLogisticsVoucherModal="closeLogisticsVoucherModal"></logisticsVoucher>
    <!--  上传纠纷凭证  -->
    <dispute-voucher v-if="isOpenDisputeVoucherModal" :order-id="orderId"
                     @closeDisputeVoucherModal="closeDisputeVoucherModal"
                     :voucherInfo="logisticsVoucherInfo"></dispute-voucher>
  </div>
</template>

<script>
import {getLogisticsProof, getPurchaseProof, getSupplementOrder} from "@/api/order/supplementOrder";
import logisticsVoucher from "@/views/order/supplementOrder/logisticsVoucher.vue";
import purchaseVoucher from "@/views/order/supplementOrder/purchaseVoucher.vue";
import disputeVoucher from "@/views/order/supplementOrder/disputeVoucher.vue";

export default {
  name: 'SellerOrder',
  components: {
    logisticsVoucher, purchaseVoucher, disputeVoucher
  },
  dicts: ['supplement_order_type'],
  data() {
    return {
      checkValue: false,
      orderId: '',
      childOrderId: "",//子订单id
      loading: false, // 遮罩层
      chooseOrderList: [], // 选中数组
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      sellerOrderList: [], // 卖家订单表格数据
      title: '订单详情', // 弹出层标题
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: undefined,
        erpInnerOrderStatus: "2",
      }, // 查询参数
      warehouseStatusList: [{
        label: "是",
        value: 1
      }, {
        label: "否",
        value: 2
      }],
      form: '',
      tabsValue: '2',
      tabsList: [{
        name: '107',
        label: '正常订单'
      }, {
        name: '114',
        label: '已作废订单'
      }, {
        name: '114',
        label: '纠纷订单'
      }],
      isOpenPurchaseVocherModal: false,//是否打开上传采购凭证模态框
      isOpenLogisticsVoucherModal: false,//是否打开上传物流凭证模态框
      isChooseOrder: false,//是否选择订单
      skuCode: "",//子订单的规格Id
      logisticsVoucherInfo: "",//已上传的物流凭证信息
      purchaseVoucherInfo: "",//已上传的采购凭证信息
      isOpenDisputeVoucherModal: false,// 是否打开上传纠纷凭证弹窗
      dateTime: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  computed: {
    endTime() {
      return time => {
        return new Date(time).getTime() / 1000 + ' '
      }
    }
  },
  created() {
    this.userInfo = this.$store.state.user.urserInfo;
    this.getList();
  },
  methods: {
    closeDisputeVoucherModal(e) {
      this.isOpenDisputeVoucherModal = e
      this.getList()
    },
    closeLogisticsVoucherModal(e, type) {
      this.isOpenLogisticsVoucherModal = e
      if (type != 'cancel') {
        this.getList()
      }
    },
    closePurchaseVoucheModal(e, type) {
      console.log('type', type, e)
      this.isOpenPurchaseVocherModal = e
      if (type != 'cancel') {
        this.getList()
      }
    },
    // 打开上传纠纷凭证弹窗
    openDisputeVoucherModal(row) {
      this.orderId = row.orderId
      this.getLogisticsProof('1')
    },
    // 打开上传采购凭证弹窗
    openPurchaseVoucherModal(row) {
      this.orderId = row.orderId
      this.childOrderId = row.childOrderId
      this.getSendGoodsInfo()
    },
    // 打开上传物流凭证弹窗
    openLogisticsVoucherModal(row) {
      this.orderId = row.orderId
      this.getLogisticsProof('0')
    },
    // 获取已上传的物流凭证信息
    getLogisticsProof(e) {
      getLogisticsProof({orderId: this.orderId}).then(res => {
        this.logisticsVoucherInfo = res.data
        if (e == '0') { //物流弹窗
          this.isOpenLogisticsVoucherModal = true
        } else {//纠纷弹窗
          this.isOpenDisputeVoucherModal = true
        }
      })
    },
    // 获取已上传的采购凭证
    getSendGoodsInfo() {
      getPurchaseProof({
        childOrderId: this.childOrderId
      }).then(res => {
        this.purchaseVoucherInfo = res.data
        this.isOpenPurchaseVocherModal = true
      })
    },
    // 切换选项卡
    tabsClick(tab, event) {
      this.queryParams.erpInnerOrderStatus = tab.name
      this.getList()
    },
    /** 查询卖家订单列表 */
    getList() {
      this.loading = true
      this.queryParams.startTime = this.dateTime[0]
      this.queryParams.endTime = this.dateTime[1]
      getSupplementOrder(this.queryParams).then(response => {
        let list = response.rows
        this.sellerOrderList = list
        this.chooseOrderList = [] // 清空所选择的订单
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
  }
}
</script>
<style>
.el-table .warning-row {
  background: #fabfbf;
}

.el-table .success-row {
  background: rgb(255, 255, 255);
}

.programme-box-item {
  margin-bottom: 20px;
  padding: 20px 30px;
  border: 1px solid #eeeeee;
}

.programme-box-item-title {
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
  margin: 10px 0 20px;
  display: block;
}

.programme-box-flex {
  display: flex;
  justify-content: center;
}

.demo-table-expand label {
  width: 100px;
  color: #99a9bf;
  padding: 0;
}

.el-form-item el-form-item--small {
  margin-bottom: 0;
}

.el-form--label-left .el-form-item__label {
  text-align: right;
}

.demo-table-expand .el-form-item {
  width: 16%;
  margin-bottom: 0;
  margin-right: 0;
}

.img-box {
  display: flex;
  align-items: flex-start;
}

.edit-box {
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
  margin-bottom: 20px;
}

.edit-box-name {
  width: 120px;
  text-align: right;
}

.edit-box input {
  display: block;
}

/*去掉number输入框的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/*解决输入中文后光标上移的问题*/
.el-input__inner {
  line-height: 1px !important;
}
</style>
